<!DOCTYPE html>
<html>
  <head>
    <script src="./index.js"></script>   
    <style>
      .container {
        overflow: auto;
        display: flex;
        flex-direction: column;
      }

      .status {
        display: flex;
        align-items: baseline;
        justify-content: space-evenly;
        padding: 0 12px;
      }

      .sec {
        margin: 4px 8px;
      }

      #connectionStatus {
        padding-left: 8px;
      }

      #connectionStatusLight {
        width: 1em;
        height: 1em;
        border-radius: 1em;
      }

      #connectionStatusLight.negative {
        background-color: #91181e;
      }

      #connectionStatusLight.positive {
        background-color: #247e60;
      }

      #log {
        margin: 2px 0;
        padding: 12px;
        border-radius: 2px;
        background-color: var(--uxp-host-widget-hover-background-color);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="sec">
        <sp-heading>Desktop Helper Example</sp-heading>
        <sp-detail>Powered by Electron, React, and UXP</sp-detail>
        <sp-divider></sp-divider>
      </div>
      <div class="sec">
        <div class="status">
          <sp-detail size="xs">STATUS</sp-detail>
          <div class="status">
            <sp-body id="connectionStatusLight" class="negative"></sp-body>
            <sp-body size="xs" id="connectionStatus">Disconnected</sp-body>
          </div>
        </div>
        <sp-divider></sp-divider>
      </div>
      <div class="sec">
        <sp-textfield placeholder="Enter data to be sent" id="textField">
          <sp-label slot="label">Send data to the helper</sp-label>
        </sp-textfield>
        <sp-button id="sendButton" type="primary">Send</sp-button>
      </div>
      <div class="sec">
        <sp-label slot="label">Received data from the helper</sp-label>
        <sp-body id="log">Messages from the helper will appear here</sp-body>
      </div>
    </div>
  </body>
</html>
